<template>
  <div class="mobile-kpi-detail common-mobile-view">
    <el-form ref="formRef" :model="kpiStore.currentKpi"
             :rules="rules" label-width="60px">
      <el-form-item label="日期" prop="date">
        <el-date-picker
            v-model="kpiStore.currentKpi.date"
            type="date" :editable="false" placeholder="请选择日期"
            value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="患者" prop="patientName">
        <el-select
            v-model="kpiStore.currentKpi.patientName"
            filterable allow-create
            :reserve-keyword="false" placeholder="请输入或选择患者"
        >
          <el-option
              v-for="(item, index) in patientList"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="项目" prop="project">
        <el-select
            v-model="kpiStore.currentKpi.project"
            filterable allow-create
            :reserve-keyword="false" placeholder="请输入或选择项目"
            @change="changeProjectEvent"
        >
          <el-option
              v-for="(item, index) in projectList"
              :key="index" :label="item.name" :value="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input-number v-model="kpiStore.currentKpi.price"
                         :min="0" :max="100"/>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="kpiStore.kpiApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除
      </el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useKpiStore } from '@/store/kpi.ts'
import { useAppStore } from '@/store/app.ts'
import { FormRules } from 'element-plus'
import { kpiRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'

const formRef = ref()
const rules = reactive<FormRules>(kpiRules)
const kpiStore = useKpiStore()
const appStore = useAppStore()

const patientList = ['尹照亮', '熊溧生', '严长省']

const projectList = [{
  name: '普通针刺',
  price: 34
},
{
  name: '手指点穴',
  price: 22
},
{
  name: '红外线理疗（15分钟）',
  price: 7
},
{
  name: '红外线理疗（30分钟）',
  price: 14
},
{
  name: '四肢疾患推拿',
  price: 42
}]

onMounted(async () => {
  appStore.isShowMobileBack = true
})

const changeProjectEvent = (value: string) => {
  const project = projectList.find((item) => item.name === value)
  kpiStore.currentKpi.price = project ? project.price : 0
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await kpiStore.handleKpiApi(kpiStore.currentKpi)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该绩效内容?').then(async () => {
    kpiStore.kpiApiType = 'DELETE'
    await kpiStore.handleKpiApi(kpiStore.currentKpi)
    history.back()
  })
}
</script>

<style lang="scss">
.mobile-kpi-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .el-radio {
    .el-radio__label {
      display: flex;
      align-items: center;
    }
  }

  .button-container {
    align-self: center;
  }
}
</style>
